<script setup lang="ts">
import type { Rule } from 'ant-design-vue/es/form';

// import { watch } from 'node:fs';
import { reactive, watch } from 'vue';
import { useRouter } from 'vue-router';

import {
  Button,
  Checkbox,
  Form,
  FormItem,
  Input,
  InputPassword,
} from 'ant-design-vue';

import { useAuthStore } from '#/store';

const authStore = useAuthStore();
// const captchaImage = ref('');
const userRegisterData = reactive({
  username: '',
  password: '',
  code: '',
  uuid: '',
  remember: true,
});

watch([authStore.captcha], () => {
  console.log(authStore.captcha.uuid);
  userRegisterData.uuid = authStore.captcha.uuid;
});
// watchEffect(() => {
//   console.log(authStore.captcha.uuid);
// });

authStore.refreshCaptchaImage();
// const refreshCaptchaImage = () => {
//   getCaptchaImage()
//     .then((res) => {
//       console.log(res);
//       captchaImage.value = `data:image/png;base64,${res.data.img}`;
//       userRegisterData.uuid = res.data.uuid;
//     })
//     .catch((error) => {
//       console.log(error);
//     });
// };
// refreshCaptchaImage();
const validateRules: Record<string, Rule[]> = {
  username: [
    {
      required: true,
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      min: 5,
      max: 20,
    },
  ],
  code: [
    {
      required: true,
      trigger: 'blur',
    },
  ],
  uuid: [
    {
      required: true,
      trigger: 'blur',
    },
  ],
};
const router = useRouter();
const goRegister = () => router.replace('/auth/register');
// function onFinish(values: typeof userRegisterData) {
//   // const authStore = useAuthStore();
//   authStore.authLogin(values);
//   // console.log(values);
//   // userLogin(values)
//   //   .then(({ data: { code, msg, token } }) => {
//   //     // console.log(res.data.);
//   //     if (code === 200) {
//   //       message.success('登陆成功！');
//   //       console.log(token);
//   //     }
//   //     if (code === 500) {
//   //       message.error(msg);
//   //       refreshCaptchaImage();
//   //     }
//   //   })
//   //   .catch((error) => {
//   //     console.log(error);
//   //   });
// }
</script>
<template>
  <h1 class="mb-4 text-[24px]">欢迎回来👏</h1>
  <Form
    :model="userRegisterData"
    :rules="validateRules"
    @finish="authStore.authLogin"
  >
    <!-- 用户名 -->
    <FormItem name="username" label="用户名">
      <Input
        v-model:value="userRegisterData.username"
        placeholder="请输入用户名"
      />
    </FormItem>
    <!-- 密码 -->
    <FormItem name="password" label="密码">
      <InputPassword
        v-model:value="userRegisterData.password"
        placeholder="请输入密码"
      />
    </FormItem>
    <!-- 验证码 -->
    <FormItem name="code" label="验证码">
      <div class="flex gap-2">
        <Input v-model:value="userRegisterData.code" placeholder="验证码" />
        <!-- <img
          @click="refreshCaptchaImage"
          class="h-[32px] cursor-pointer"
          :src="captchaImage"
          alt="图片验证码"
        /> -->
        <img
          @click="authStore.refreshCaptchaImage"
          class="h-[32px] cursor-pointer"
          :src="authStore.captcha.image"
          alt="图片验证码"
        />
      </div>
    </FormItem>
    <FormItem class="hidden" name="uuid">
      <Input :value="authStore.captcha.uuid" />
    </FormItem>
    <!-- 记住密码 -->
    <FormItem name="remember">
      <Checkbox v-model:checked="userRegisterData.remember">
        记住密码
      </Checkbox>
    </FormItem>
    <!-- 提交 -->
    <FormItem>
      <Button type="primary" block html-type="submit">登录</Button>
    </FormItem>
    <div class="mt-4 text-center text-sm">
      还没有账号？
      <span class="vben-link text-sm font-normal" @click="goRegister">
        去注册
      </span>
    </div>
  </Form>
</template>
<style scoped>
:deep(.ant-form-item-label) {
  display: none;
}
</style>
